<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cartzilla | Mailchimp subscription form</title>
    <!-- SEO Meta Tags-->
    <meta name="description" content="Cartzilla - Bootstrap E-commerce Template">
    <meta name="keywords" content="bootstrap, shop, e-commerce, market, modern, responsive,  business, mobile, bootstrap, html5, css3, js, gallery, slider, touch, creative, clean">
    <meta name="author" content="Createx Studio">
    <!-- Viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon and Touch Icons-->
    <link rel="apple-touch-icon" sizes="180x180" href="../apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">
    <link rel="manifest" href="../site.webmanifest">
    <link rel="mask-icon" color="#fe6a6a" href="../safari-pinned-tab.svg">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="theme-color" content="#ffffff">
    <!-- Vendor Styles including: Font Icons, Plugins, etc.-->
    <link rel="stylesheet" media="screen" href="../vendor/simplebar/dist/simplebar.min.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/tiny-slider/dist/tiny-slider.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/themes/prism.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/toolbar/prism-toolbar.css"/>
    <link rel="stylesheet" media="screen" href="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.css"/>
    <!-- Main Theme Styles + Bootstrap-->
    <link rel="stylesheet" media="screen" href="../css/theme.min.css">
    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-WKV3GT5');
    </script>
  </head>
  <!-- Body-->
  <body>
    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="//www.googletagmanager.com/ns.html?id=GTM-WKV3GT5" height="0" width="0" style="display: none; visibility: hidden;"></iframe>
    </noscript>
    <main class="container-fluid">
      <!-- Main content-->
      <section class="offcanvas-enabled row pb-3 pb-md-4">
        <div class="col-xxl-9">
          <!-- Navbar-->
          <header class="navbar navbar-expand navbar-light fixed-top bg-light shadow-sm px-3 px-lg-4" data-scroll-header data-fixed-element><a class="navbar-brand d-lg-none" href="dev-setup.html"><img src="../img/logo-dark.png" width="142" alt="Cartzilla"></a>
            <ul class="navbar-nav ms-auto d-none d-lg-flex">
              <li class="nav-item"><a class="nav-link" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live preview</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
              <li class="nav-item"><a class="nav-link" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></li>
              <li class="nav-item">
                <div class="nav-link disabled text-border px-1">|</div>
              </li>
            </ul>
            <button class="navbar-toggler d-block d-lg-none ms-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#docs-nav"><span class="navbar-toggler-icon"></span></button><a class="btn btn-primary btn-shadow ms-2 ms-lg-4" href="https://themes.getbootstrap.com/product/cartzilla-bootstrap-e-commerce-template-ui-kit/" target="_blank" rel="noopener"><i class="ci-cart me-2 d-none d-sm-inline-block"></i>Buy now</a>
          </header>
          <!-- Side navigation-->
          <aside class="offcanvas offcanvas-expand bg-dark" id="docs-nav">
            <div class="offcanvas-cap bg-darker d-none d-lg-block"><a class="navbar-brand py-1" href="dev-setup.html"><img src="../img/logo-light.png" width="142" alt="Cartzilla"></a><span class="badge bg-success">Docs</span></div>
            <div class="offcanvas-cap bg-darker align-items-center d-flex d-lg-none">
              <div class="d-flex align-items-center">
                <h5 class="text-light mb-0 me-2">Menu</h5><span class="badge bg-success">Docs</span>
              </div>
              <button class="btn-close btn-close-white" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body" data-simplebar data-simplebar-auto-hide="true">
              <div class="pt-4 pb-3 mt-lg-3">
                <div class="d-flex d-lg-none pb-4 mb-4 border-bottom border-light"><a class="btn btn-outline-light btn-sm me-3" href="../index.html"><i class="ci-eye align-middle mt-n1 me-2"></i>Live demo</a><a class="btn btn-light btn-sm" href="../components/typography.html"><i class="ci-server align-middle mt-n1 me-2"></i>Components</a></div>
                <div class="widget widget-links widget-light mb-4 pb-2">
                  <h3 class="widget-title text-white">Contents</h3>
                  <ul class="widget-list">
                    <li class="widget-list-item"><a class="widget-list-link" href="dev-setup.html">Dev environment setup</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="working-with-gulp.html">Working with Gulp</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="project-structure.html">Project structure</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="install-vendor-plugin.html">Installing Vendor plugins with npm and Gulp</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="using-preprocessors.html">Using Pug &amp; Sass</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="autoprefixer.html">Browser support</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="global-colors.html">Global colors</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="components.html">Components</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="navbar-footer.html">Navbar / Page title / Footer variants (Pug)</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="utilities.html">Utility classes</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="ui-icons.html">UI icons (Icon font)</a></li>
                    <li class="widget-list-item active"><a class="widget-list-link" href="mailchimp.html">Mailchimp subscription form</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="credits.html">Sources and credits</a></li>
                    <li class="widget-list-item"><a class="widget-list-link" href="changelog.html">Changelog</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </aside>
          <!-- Page title-->
          <div class="border-bottom mt-lg-2 pt-5 pb-2 mb-5">
            <h1 class="mt-3 mt-lg-4 pt-5">Mailchimp subscription form</h1>
          </div>
          <div class="pb-5">
            <p>Mailchimp is a marketing automation platform and an email marketing service.</p>
            <p>In other words this Mailchimp widget will help you to collect user emails right from you website to run email marketing campaign via Mailchimp web application. Below is the live example of the widget that collects emails for Createx Studio. Switch to HTML or Pug tab to see code example and instructions.</p>
            <div class="card border-0 shadow">
              <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" role="tablist">
                  <li class="nav-item"><a class="nav-link active" href="#result" data-bs-toggle="tab" role="tab" aria-controls="result" aria-selected="true">Result</a></li>
                  <li class="nav-item"><a class="nav-link" href="#html" data-bs-toggle="tab" role="tab" aria-controls="html" aria-selected="false">HTML</a></li>
                  <li class="nav-item"><a class="nav-link" href="#pug" data-bs-toggle="tab" role="tab" aria-controls="pug" aria-selected="false">Pug</a></li>
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content">
                  <div class="tab-pane fade show active" id="result" role="tabpanel">
                    <div class="widget pb-2" style="max-width: 24rem;">
                      <h3 class="widget-title">Subscribe</h3>
                      <form class="subscription-form validate" action="https://studio.us12.list-manage.com/subscribe/post?u=c7103e2c981361a6639545bd5&amp;amp;id=29ca296126" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
                        <div class="input-group flex-nowrap"><i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
                          <input class="form-control rounded-start" type="email" name="EMAIL" placeholder="Your email" required>
                          <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
                        </div>
                        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                        <div style="position: absolute; left: -5000px;" aria-hidden="true">
                          <input class="subscription-form-antispam" type="text" name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1">
                        </div>
                        <div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
                        <div class="subscription-status"></div>
                      </form>
                    </div>
                  </div>
                  <div class="tab-pane fade" id="html" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-html">&lt;!-- Widget: Subscription (MailChimp Ajax)
        Instructions how to get MailChimp action link:
        1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
        2. In the provided code find form action link and copy it
        3. Paste it to the form action attribute below
        4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
        5. Paste what you have copied from name attribute to the name attribute of input with class &quot;subscription-form-antispam&quot;
--&gt;
&lt;div class=&quot;widget&quot;&gt;
  &lt;h3 class=&quot;widget-title&quot;&gt;Subscribe&lt;/h3&gt;
  &lt;form class=&quot;subscription-form validate&quot; action=&quot;mailchimp-embedded-form-atcion-link&quot; method=&quot;post&quot; name=&quot;mc-embedded-subscribe-form&quot; target=&quot;_blank&quot; novalidate&gt;
    &lt;div class=&quot;input-group flex-nowrap&quot;&gt;
      &lt;i class=&quot;ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3&quot;&gt;&lt;/i&gt;
      &lt;input class=&quot;form-control rounded-start&quot; type=&quot;email&quot; name=&quot;EMAIL&quot; placeholder=&quot;Your email&quot; required&gt;
      &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot; name=&quot;subscribe&quot;&gt;Subscribe*&lt;/button&gt;
    &lt;/div&gt;
    &lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt;
    &lt;div style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;subscription-form-antispam&quot; name=&quot;mailchimp-embedded-form-antispam-name-attribute&quot; tabindex=&quot;-1&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-text&quot;&gt;*Subscribe to our newsletter to receive early discount offers, updates and new products info.&lt;/div&gt;
    &lt;div class=&quot;subscription-status&quot;&gt;&lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
                  </div>
                  <div class="tab-pane fade" id="pug" role="tabpanel">
                    <pre class="line-numbers"><code class="lang-pug">// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
// 5. Paste what you have copied from name attribute to the name attribute of input with class &quot;subscription-form-antispam&quot;
form(action=&quot;mailchimp-embedded-form-atcion-link&quot;, method=&quot;post&quot;, name=&quot;mc-embedded-subscribe-form&quot;, target=&quot;_blank&quot;, novalidate).subscription-form.validate
  .input-group.flex-nowrap
    i.ci-mail.position-absolute.top-50.translate-middle-y.text-muted.fs-base.ms-3
    input(type=&quot;email&quot;, name=&quot;EMAIL&quot;, placeholder=&quot;Your email&quot;, required).form-control.rounded-start
    button(type=&quot;submit&quot;, name=&quot;subscribe&quot;).btn.btn-primary Subscribe*
  // real people should not fill this in and expect good things - do not remove this or risk form bot signups
  div(style=&quot;position: absolute; left: -5000px;&quot; aria-hidden=&quot;true&quot;)
    input(type=&quot;text&quot;, name=&quot;mailchimp-embedded-form-antispam-name-attribute&quot;, tabindex=&quot;-1&quot;).subscription-form-antispam
  .form-text *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscription-status</code></pre>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- Back To Top Button--><a class="btn-scroll-top" href="#top" data-scroll data-fixed-element><span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span><i class="btn-scroll-top-icon ci-arrow-up">   </i></a>
    <!-- Vendor scrits: js libraries and plugins-->
    <script src="../vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../vendor/simplebar/dist/simplebar.min.js"></script>
    <script src="../vendor/tiny-slider/dist/min/tiny-slider.js"></script>
    <script src="../vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
    <script src="../vendor/prismjs/components/prism-core.min.js"></script>
    <script src="../vendor/prismjs/components/prism-markup.min.js"></script>
    <script src="../vendor/prismjs/components/prism-clike.min.js"></script>
    <script src="../vendor/prismjs/components/prism-javascript.min.js"></script>
    <script src="../vendor/prismjs/components/prism-pug.min.js"></script>
    <script src="../vendor/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
    <script src="../vendor/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
    <script src="../vendor/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
    <!-- Main theme script-->
    <script src="../js/theme.min.js"></script>
  </body>
</html>